<template>
	<view>
		<!-- 收货地址 -->
		<view style="padding-top:10rpx;">
			<view class="addr" @tap="selectAddress">
				<view class="left" v-if="address.address_id">
					<view class="tel-name">
						<view class="name">{{ address.consignee }}</view>
						<view class="tel">{{ address.mobile }}</view>
					</view>
					<view class="addres">
						{{ address.address }}
					</view>
				</view>
				<view class="left" v-else>
					<view class="tel-name">前往添加地址</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#969696" class="icon" :size="50"></u-icon>
				</view>
			</view>
		</view>

		<!-- 购买商品列表 -->

		<div class="wy-media-box weui-media-box_text">
			<image src="https://shop.zdsy.shop/themes/screens/public/assets/images/icon-link4.png" class="shop_logo">
				<span>{{store.store_name}}</span>
		</div>
		<view class="buy-list">
			<view class="row">
				<view class="goods-info">
					<view class="img">
						<image :src="goods_info.original_img"></image>
					</view>
					<view class="info">
						<view class="title">{{ goods_info.goods_name }}</view>
						<view v-if="spec.key_name" class="spec">
							<text>规格：{{spec.key_name}}</text>
						</view>
						<view class="price-number">
							<view class="price">
								<view v-if="buy_type==2" style="color: #ff4b4b;">￥{{spec.group_price}}</view>
								<view v-else-if="buy_type==4" style="color: #ff4b4b;">￥{{spec.red_price}}</view>
								<view v-else style="color: #ff4b4b;">￥{{spec.price}}</view>
							</view>
							<view class="number">数量：x{{ goods_num }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 提示-备注 -->
		<view class="order">
			<view class="row">
				<view class="left">备注 :</view>
				<view class="right"><input placeholder="选填,备注内容" v-model="user_note" /></view>
			</view>
		</view>
		<!-- 明细 -->
		<view class="detail">
			<view class="row">
				<view class="nominal">配送方式</view>
				<view class="content">快递</view>
			</view>

			<view class="row">
				<view class="nominal">运费</view>
				<view class="content">
					<view v-if="goods_info.postage>0">
						￥{{goods_info.postage * goods_num}}
					</view>
					<view v-else>免运费</view>
				</view>
			</view>

			<view v-if="goods_info.is_free==0">
				<view v-if="buy_type==4 && redpackets_balance">
					<view class="row">
						<view class="nominal">可用红包</view>
						<view class="content">
							<u-radio-group v-model="redpackets_balance">
								<u-radio :name="redpackets_balance"></u-radio>
								￥{{ redpackets_balance}}
							</u-radio-group>
						</view>
					</view>
				</view>
			</view>
			<view v-else>
				<view v-if="buy_type==3 && redpackets_balance>0 && store.red_authority==1">
					<view class="row">
						<view class="nominal">可用红包</view>
						<view class="content">
							<u-radio-group v-model="redpackets_balance">
								<u-radio :name="redpackets_balance"></u-radio>
								￥{{ redpackets_balance}}
							</u-radio-group>
						</view>
					</view>
				</view>
			</view>
			<view v-if="buy_type == 6 && goods_info.discount_red_price > 0">

				<div class="row" v-if="is_vip == 1">
					<view class="">
						<span class="mg-r-10">VIP免红包特权</span>
						<span class="fr" style="color: red;">
							-￥{{goods_info.discount_red_price}}
						</span>
					</view>
				</div>


				<div class="" v-else>
					<div class="row">
						<view>
							<span class="mg-r-10" style="color: red;">可抵用红包{{goods_info.discount_red_price}}
								x{{goods_num}}</span>
						</view>
						<view class="red_fr">
							<view style="color: red;">-￥{{redpackets_balance}}</view>
							<view>
								<checkbox-group @change='change1'>
									<!-- 
										1.value: checkbox的表示, 选中时触发chang事件, 会携带<checkbox>的value值
										2.disabled: 是否禁用, 默认为false
										3.checked: 当前是否选中, 可用来设置默认选中
										4.color: checkbox的颜色, 同css的颜色
										5.调节CheckBox的大小:在css中使用transform:scale(num)
									 -->
									<checkbox style="transform: scale(0.7);border-radius: 50% !important;"
										:value="redpackets_balance" checked="true" color="red"></checkbox>
								</checkbox-group>
							</view>

							<!-- <input style="width: 20px;" class="aui-radio" type="checkbox" id="redpackets_balance"
								:value="redpackets_balance" checked disabled> -->

							<!-- <checkbox-group  @change="checkboxChange" style="display:inline-block">
									<checkbox shape="circle" :class="isChecked?'checked':''" :checked="isChecked?true:false"
										value="1"></checkbox>
							</checkbox-group> -->

							<!-- <u-radio-group v-model="redpackets_balance">
								<u-radio :name="redpackets_balance"></u-radio>
							</u-radio-group> -->
							<!-- <input style="width: 20px;" class="aui-radio" type="checkbox"
										id="redpackets_balance" :value="redpackets_balance" checked disabled> -->
						</view>
					</div>
				</div>
			</view>

			<div class="" v-if="buy_type == 6">
				<div class="row">
					<view class="mg-r-10">现金</view>
					<view class="fr txt-color-red">￥{{cach_price}}</view>
				</div>
			</div>

		</view>

		<view class="detail" v-if="buy_type != 3">
			<view class="row">
				<view>微信支付</view>
				<view>
					<u-radio-group v-model="pay_type">
						<u-radio name="微信支付" @change="payChange(1)"></u-radio>
					</u-radio-group>
				</view>
			</view>
			<!-- v-if="account_balance>0 && is_yue==0" -->
			<view class="row">
				<view>余额支付 可用余额:{{account_balance}}</view>
				<view>
					<u-radio-group v-model="pay_type">
						<u-radio name="余额支付" @change="payChange(2)"></u-radio>
					</u-radio-group>
				</view>
			</view>

		</view>
		<div class="displayFlex shop_total">
			<div class="flex">共{{goods_num}}件商品</div>
			<div>共计：<span>{{total_price}}</span></div>
		</div>
		<view class="blck"></view>
		<view class="footer">

			<view class="settlement" v-if="buy_type==3">
				<view class="sum">
					最低<text class="money">￥{{amount}}元带回家</text>
				</view>
				<view class="btn" @tap="bargain_submit">邀人帮砍</view>
			</view>

			<view class="settlement" v-else-if="buy_type==5">
				<!-- #ifdef MP-WEIXIN -->
				<view class="sum" onclick="order_submit(1)">0元购{{need_pay}}元红包券</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view class="sum" onclick="order_submit(2)">0元购{{need_pay}}元红包券</view>
				<!-- #endif -->
				<!-- <view class="btn" onclick="continue_pay">继续支付</view> -->
			</view>

			<view class="settlement" v-else>
				<view class="sum">
					合计:
					<view class="money">￥{{need_pay}}</view>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view class="btn" @tap="order_submit(1)">提交订单</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view class="btn" @tap="order_submit(2)">提交订单</view>
				<!-- #endif -->
				
			</view>

		</view>
		<view>

			<view :hidden="userFeedbackHidden" class="popup_content">
				<view class="popup_textarea_item">
					<view style="display:flex;justify-content: center;">
						<image :src="qrcode" style="width:150px;height:150px"></image>
					</view>
					<view style="display:flex;justify-content: center;">截图保存后扫码支付</view>
					<view @click="submitFeedback()" class="buttons">
						<text class="popup_button">关闭</text>
					</view>
				</view>
			</view>
			<view class="popup_overlay" :hidden="userFeedbackHidden" @click="hideDiv()"></view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState(['address', 'user', 'token']) //获取地址
		},
		data() {
			return {
				qrcode: '',
				userFeedbackHidden: true,
				checkboxValue1: [],
				// 基本案列数据
				checkboxList1: [{
						name: '苹果',
						disabled: false
					},
					{
						name: '香蕉',
						disabled: false
					}
				],
				cach_price: 0,
				is_vip: 0,
				pay_type: '微信支付',
				account_balance: "0.00",
				loading: false,
				goods_id: 0,
				goods_num: 1,
				need_pay: "0.00",
				price_id: 0, //合计价格
				group_id: 0,
				buy_type: 0,
				user_note: '', // 备注
				cart: [], // 下单数据
				skuId: 0,
				amount: "0.00",
				goods_info: [],
				spec: [],
				redpackets_balance: '',
				store: [],
				total_price: 0,
				isPay: true,
			};
		},
		onLoad(options) {

			this.$isLogin(true);
			this.goods_id = options.goods_id;
			this.goods_num = options.goods_num || 1;
			this.price_id = options.price_id || 0;
			this.group_id = options.group_id || 0;
			this.buy_type = options.buy_type || 1;
			this.storeAddress()
			// 获取下单数据
			this.$api.get({
				url: 'portal/my/my_order_info',
				data: {
					goods_id: this.goods_id || 5014,
					goods_num: this.goods_num,
					price_id: this.price_id,
					group_id: this.group_id,
					buy_type: this.buy_type,
				},
				success: res => {
					if (res.code === 1) {
						let data = res.data;
						this.need_pay = data.need_pay;
						this.total_price = data.total_price;
						this.goods_info = data.goods_info;
						this.spec = data.spec;
						this.redpackets_balance = data.redpackets_balance
						this.store = data.store
						this.cach_price = data.cach_price;
						this.is_vip = data.is_vip;
						// console.log(this.cart);
						// this.$store.commit('storeAddress', data.addresses[0] || {}); // 保存地址
					} else {
						this.$toast(res.msg);
					}
				}
			});
		},
		methods: {
			showDiv() {
				this.userFeedbackHidden = false
			},
			hideDiv() {
				this.userFeedbackHidden = true
			},
			//url:网络地址
			submitFeedback() {
				// 先下载图片
				uni.downloadFile({
					url: this.qrcode,
					success: (res) => {
						console.log(res)
						this.hideDiv()
						return;
						// 获取到图片本地地址后再保存图片到相册（因为此方法不支持远程地址）
						// #ifdef APP-PLUS
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								uni.showToast({
									title: "保存成功！",
								});
								this.hideDiv()
							},
							fail: () => {
								uni.showToast({
									title: "保存失败",
								});
							},
						});
						// #endif

						// #ifdef H5
						var imgUrl = this.qrcode;
						var down = plus.downloader.createDownload(imgUrl, {}, function(e, a) {
							console.log(e);
							plus.gallery.save(e.filename, function(e) {
								uni.showToast({
									title: "保存成功",
									mask: true,
								});
								console.log("下载成功");
								this.hideDiv()
							}, function(e) {
								console.log("下载失败,请重试");
							})
						});
						down.start();
						// #endif
					},
				});
			},
			change1(e) {
				console.log(e.detail.value)
			},
			bargain_submit() {
				var goods_id = this.goods_info.goods_id;
				var price_id = this.spec.price_id;
				var goods_num = this.goods_num;
				var group_id = this.group_id;
				var buy_type = this.buy_type;
				this.$api.post({
					url: 'portal/order/bargain_submit',
					data: {
						// user_note:remarks,
						goods_id: goods_id,
						goods_num: goods_num,
						price_id: price_id,
						address_id: this.address.address_id,
						group_id: group_id,
						buy_type: buy_type,
						pay_type: this.pay_type
					},
					success: function(res) {
						if (res.code == 3) {
							uni.navigateTo({
								url: res.data.link
							});
							return;
						}
						if (res.code == 1) {
							uni.navigateTo({
								url: 'pages/shop/bargain_details/bargain_details?order_id=' + res
									.order_id + '&goods_id=' + res.goods_id + 'price_id=' + res
									.price_id
							});
						} else {
							alert(res.msg);
						}
					}
				})
			},
			payChange(type) {
				console.log(type)
				this.pay_type = type;
			},
			storeAddress() {
				this.$api.get({
					url: 'portal/my/default_address',
					data: {},
					success: res => {
						if (res.code === 1) {
							this.$store.commit('storeAddress', res.data || {}); // 保存地址
						} else {
							this.$toast(res.msg);
						}
					}
				});

			},
			//选择收货地址
			selectAddress() {
				if (this.address.consignee) {
					uni.navigateTo({
						url: '/pages/my/address/address?type=select'
					});
				} else {
					uni.navigateTo({
						url: '/pages/my/address/log?type=select'
					});
				}
			},
			order_submit(submit_type) {



				if (!this.address.address_id) {
					this.$toast('请先添加收货地址');
					return;
				}
				// 防止重复下单
				if (this.loading) {
					return;
				}
				uni.showLoading({
					title: '正在提交订单...'
				});
				this.loading = true;
				var goods_id = this.goods_info.goods_id;
				var price_id = this.spec.price_id;
				var goods_num = this.goods_num;
				var group_id = this.group_id;
				var buy_type = this.buy_type;
				var user_note = this.user_note;
				console.log(this.pay_type)
				this.$api.post({
					url: 'portal/wx_order/order_submit',
					data: {
						user_note: user_note,
						goods_id: goods_id,
						goods_num: goods_num,
						price_id: price_id,
						address_id: this.address.address_id,
						group_id: group_id,
						buy_type: buy_type,
						pay_type: this.pay_type,
						submit_type:submit_type
					},
					success: res => {
						console.log(res)
						if (res.code == 3) {
							uni.navigateTo({
								url: res.data.link
							});
							return;
						}
						// #ifdef MP-WEIXIN
						wx.requestPayment({
							timeStamp: res.data.payData.timeStamp,
							nonceStr: res.data.payData.nonceStr,
							package: res.data.payData.package,
							signType: "MD5",
							paySign: res.data.payData.paySign,
							success: function(res1) {
								_this.isPay = false;
								uni.redirectTo({
									url: '../payment/payment?id=' + res.data.order_id
								});
							},
							fail: function(res) {
								_this.isPay = false;
							},
						});
						// #endif

						// #ifdef H5
						this.qrcode = res.data
						this.showDiv()
						// #endif

					},
					complete: () => {
						uni.hideLoading();
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.popup_overlay {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: black;
		z-index: 1001;
		-moz-opacity: 0.8;
		opacity: .80;
		filter: alpha(opacity=88);
	}

	.popup_content {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 500rpx;
		height: 500rpx;
		margin-left: -270rpx;
		margin-top: -270rpx;
		border: 10px solid white;
		background-color: white;
		z-index: 1002;
		overflow: auto;
	}

	.popup_title {
		width: 480rpx;
		text-align: center;
		font-size: 32rpx;
	}



	.popup_textarea {
		width: 410rpx;
		font-size: 26rpx;
		margin-left: 20rpx;
	}

	.popup_button {
		color: #fff;
		font-size: 36rpx;
		height: 40rpx;
		line-height: 40rpx;
	}

	.buttons {
		text-align: center;
		font-size: 50rpx;
		margin-top: 40rpx;
		background-color: #007AFF;
		color: #fff;
	}

	.red_fr {
		display: flex;
		justify-content: center;
	}

	body {
		background: #fff;
	}

	uni-page-body {
		background: #fff;
	}

	.uni-body {
		background: #fff;
	}

	.addr {
		width: 96%;
		padding: 20upx 3%;
		margin: 30upx auto 20upx auto;
		// box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
		border-bottom: 1px solid #e1e1e1;
		// border-radius: 20upx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.tel-name {
			width: 100%;
			display: flex;
			font-size: 32upx;

			.tel {
				margin-left: 40upx;
			}
		}

		.addres {
			width: 100%;
			font-size: 26upx;
			color: #999;
		}
	}

	.buy-list {
		width: 96%;
		padding: 0upx 3%;
		margin: 0upx auto 20upx auto;
		// box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
		// border-radius: 20upx;
		border-bottom: 1px solid #e1e1e1;

		.row {
			margin: 20upx 0;

			.goods-info {
				width: 100%;
				display: flex;

				.img {
					width: 22vw;
					height: 22vw;
					border-radius: 10upx;
					overflow: hidden;
					flex-shrink: 0;
					margin-right: 10upx;

					image {
						width: 22vw;
						height: 22vw;
					}
				}

				.info {
					width: 100%;
					height: 22vw;
					overflow: hidden;
					display: flex;
					flex-wrap: wrap;
					position: relative;

					.title {
						width: 100%;
						font-size: 28upx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						// text-align: justify;
						overflow: hidden;
					}

					.spec {
						font-size: 22upx;
						background-color: #f3f3f3;
						color: #a7a7a7;
						height: 40upx;
						display: flex;
						align-items: center;
						padding: 0 10upx;
						border-radius: 20upx;
						margin-bottom: 20vw;
					}

					.price-number {
						position: absolute;
						width: 100%;
						bottom: 0upx;
						display: flex;
						justify-content: space-between;
						align-items: flex-end;
						font-size: 28upx;
						height: 40upx;

						.price {
							color: #f06c7a;
						}

						.number {
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
				}
			}
		}
	}

	.order {
		width: 96%;
		padding: 10upx 3%;
		margin: 30upx auto 20upx auto;
		// box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
		// border-radius: 20upx;
		border-bottom: 1px solid #e1e1e1;

		.row {
			margin: 20upx 0;
			height: 40upx;
			display: flex;

			.left {
				font-size: 28upx;
			}

			.right {
				margin-left: 40upx;
				font-size: 26upx;
				color: #999;

				input {
					font-size: 26upx;
					color: #999;
				}
			}
		}
	}

	.blck {
		width: 100%;
		height: 100upx;
	}

	.order_pay_select {
		width: 750rpx;
		display: flex;
		flex-direction: column;

		.order_pay {
			display: flex;
			justify-content: center;
			flex-direction: row;
			align-content: space-between;
		}
	}

	.footer {
		width: 750rpx;
		padding: 0 4%;
		background-color: #fbfbfb;
		height: 100upx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 28upx;
		position: fixed;
		bottom: 0upx;
		z-index: 5;

		.settlement {
			width: 80%;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.sum {
				width: 50%;
				font-size: 28upx;
				margin-right: 10upx;
				display: flex;
				justify-content: flex-end;

				.money {
					font-weight: 600;
				}
			}

			.btn {
				padding: 0 30upx;
				height: 60upx;
				background-color: #f06c7a;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30upx;
				border-radius: 40upx;
			}
		}
	}

	.detail {
		width: 96%;
		padding: 10upx 3%;
		margin: 30upx auto 20upx auto;
		// box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
		// border-radius: 20upx;
		border-bottom: 1px solid #e1e1e1;

		.row {
			height: 60upx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.nominal {
				font-size: 28upx;
			}

			.content {
				font-size: 26upx;
				color: #f06c7a;
			}
		}
	}

	.wy-media-box {
		margin: 0;
		border-top: none;
		padding: 12px 10px;
	}

	.wy-media-box .shop_logo {
		width: 20px;
		height: 20px;
		margin: 0 10px;
		vertical-align: bottom;
	}

	.weui-media-box_appmsg .weui-media-box__hd {
		width: 40px;
		height: 40px;
	}

	.weui-panel {
		margin-top: 0;
	}

	.pay {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 50px;
		display: flex;
		align-items: center;
		background-color: #fff;
	}

	.weui-btn:after {}

	.address-name span {
		margin-right: 20px;
	}

	.displayFlex {
		display: flex;
		align-items: center;
	}

	.flex {
		flex: 1;
	}

	.shop_total {
		padding: 10px 15px;
		border-bottom: 1px solid #e1e1e1;
		background-color: #fff;
		font-size: 14px;
	}

	.shop_total .flex {
		text-align: right;
		margin-right: 20px
	}

	.shop_total span {
		font-size: 16px;
		color: #ff4b4b;
	}

	.txt-color-red {
		color: #ff4b4b;
	}

	.order_pay {
		margin: 10px 0;
	}

	.aui-radio:checked,
	.aui-radio.aui-checked,
	.aui-checkbox:checked,
	.aui-checkbox.aui-checked {
		background-color: #FF9A32;
		border: solid 1px #FF9A32;
		text-align: center;
		background-clip: padding-box;
	}

	.aui-radio,
	.aui-checkbox {
		width: 1.0rem;
		height: 1.0rem;
		background-color: #ffffff;
		border: solid 1px lightblue;
		-webkit-border-radius: 0.6rem;
		border-radius: 0.6rem;
		font-size: 0.8rem;
		margin: 0;
		padding: 0;
		position: relative;
		display: inline-block;
		vertical-align: top;
		cursor: default;
		-webkit-appearance: none;
		-webkit-user-select: none;
		user-select: none;
		-webkit-transition: background-color ease 0.1s;
		transition: background-color ease 0.1s;
	}

	.aui-radio:checked:before,
	.aui-radio.aui-checked:before,
	.aui-checkbox:checked:before,
	.aui-checkbox.aui-checked:before,
	.aui-radio:checked:after,
	.aui-radio.aui-checked:after,
	.aui-checkbox:checked:after,
	.aui-checkbox.aui-checked:after {
		content: '';
		width: 0.5rem;
		height: 0.3rem;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -0.25rem;
		margin-top: -0.25rem;
		background: transparent;
		border: 1px solid #ffffff;
		border-top: none;
		border-right: none;
		z-index: 2;
		-webkit-border-radius: 0;
		border-radius: 0;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	.weui-cells {
		margin-top: 0;
	}

	.remarks {
		margin-bottom: 50px;
	}

	.shadow {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 998;
		display: none;
	}

	.shadow-box {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		height: 200px;
		width: 100%;
		border-radius: 10px;
		z-index: 999;
	}

	.shadow-top {
		text-align: center;
		position: relative;
	}

	.shadow-box img {
		width: 200px;
	}

	.shadow-box .money {
		position: absolute;
		display: inline-block;
		width: 100%;
		text-align: center;
		top: 100px;
		font-size: 12px;
		color: #fff;
	}

	.shadow-box .money span {
		font-size: 18px;
		color: #FCF332;
	}

	.close_btn {
		position: absolute;
		margin: 0 auto;
		margin-top: 50px;
		width: 100%;
		text-align: center;
	}

	.close_btn span {
		background: #df2e24;
		color: #fff;
		padding: 0.2rem;
		display: inline-block;
		width: 30%;
		border-radius: 50px;
	}
</style>
